<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>喜茶 - 点单</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="{{ url_for('static', filename='css/style2.css') }}" rel="stylesheet">
  <!-- 自定义工具类 -->
</head>

<body class="bg-gray-50 font-sans">
  <!-- 顶部导航栏 -->
  <header class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between h-16 md:h-20">
        <!-- 品牌Logo -->
        <div class="flex items-center">
          <a href="#" class="flex items-center">
            <span class="text-heytea-green text-2xl md:text-3xl font-bold">喜茶</span>
          </a>
        </div>
        
        <!-- 中间导航 - 仅在中等以上屏幕显示 -->
       {% include "navbar.html" %}
        <!-- 右侧功能区 -->
        <div class="flex items-center space-x-4">
          <button class="text-gray-600 hover:text-heytea-green transition-colors">
            <i class="fa fa-search text-lg"></i>
          </button>
          <button class="text-gray-600 hover:text-heytea-green transition-colors">
            <i class="fa fa-user text-lg"></i>
          </button>
          <!-- 购物车按钮 -->
          <button id="cartBtn" class="relative text-gray-600 hover:text-heytea-green transition-colors">
            <i class="fa fa-shopping-cart text-lg"></i>
            <span id="cartCount" class="absolute -top-2 -right-2 bg-heytea-orange text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
          </button>
          <!-- 移动端菜单按钮 -->
          <button id="mobileMenuBtn" class="md:hidden text-gray-600 hover:text-heytea-green transition-colors">
            <i class="fa fa-bars text-lg"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div id="mobileMenu" class="hidden md:hidden bg-white border-t animate-fadeIn">
      <div class="container mx-auto px-4 py-3 space-y-3">
        <a href="#" class="block py-2 text-heytea-green font-medium">点单</a>
        <a href="#" class="block py-2 text-gray-600 hover:text-heytea-green transition-colors">门店</a>
        <a href="#" class="block py-2 text-gray-600 hover:text-heytea-green transition-colors">会员</a>
        <a href="#" class="block py-2 text-gray-600 hover:text-heytea-green transition-colors">关于我们</a>
      </div>
    </div>
  </header>
{%block main%}
{%endblock%}
  
  <!-- 购物车侧边栏 -->
  <div id="cartSidebar" class="fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-2xl transform translate-x-full transition-transform duration-300 z-50">
    <div class="h-full flex flex-col">
      <!-- 购物车头部 -->
      <div class="p-4 border-b flex items-center justify-between">
        <h3 class="text-lg font-semibold">我的购物车</h3>
        <button id="closeCartBtn" class="text-gray-500 hover:text-gray-700">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <!-- 购物车内容 -->
      <div id="cartItems" class="flex-1 overflow-y-auto p-4 space-y-4 scrollbar-hide">
        <!-- 购物车为空状态 -->
        <div id="emptyCart" class="h-full flex flex-col items-center justify-center text-center text-gray-500 py-10">
          <i class="fa fa-shopping-cart text-5xl mb-4 opacity-30"></i>
          <p class="mb-2">购物车还是空的哦</p>
          <p class="text-sm">快去添加喜欢的饮品吧~</p>
        </div>
        
        <!-- 购物车商品将通过JS动态添加 -->
      </div>
      
      <!-- 购物车底部 -->
      <div class="p-4 border-t bg-gray-50">
        <div class="flex justify-between mb-2">
          <span class="text-gray-600">小计</span>
          <span id="cartSubtotal" class="font-semibold">¥0</span>
        </div>
        <div class="flex justify-between mb-4">
          <span class="text-gray-600">预计打包费</span>
          <span id="cartPackaging" class="font-semibold">¥0</span>
        </div>
        <div class="flex justify-between text-lg mb-6">
          <span class="font-medium">总计</span>
          <span id="cartTotal" class="font-bold text-heytea-green">¥0</span>
        </div>
        <button id="checkoutBtn" class="w-full bg-heytea-green text-white py-3 rounded-lg font-medium hover:bg-heytea-darkGreen transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled>
          去结算
        </button>
      </div>
    </div>
  </div>
  
  <!-- 半透明遮罩 -->
  <div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden transition-opacity duration-300"></div>
  
  <!-- 加入购物车成功提示 -->
  <div id="addToCartToast" class="fixed bottom-6 left-1/2 transform -translate-x-1/2 bg-heytea-green text-white px-6 py-3 rounded-full shadow-lg flex items-center opacity-0 pointer-events-none transition-opacity duration-300 z-50">
    <i class="fa fa-check mr-2"></i>
    <span>已加入购物车</span>
  </div>
  
  <!-- 页脚 -->
  <footer class="bg-gray-100 py-10">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <h4 class="text-lg font-bold text-heytea-green mb-4">喜茶</h4>
          <p class="text-gray-600 text-sm">喜茶，新茶饮的开创者，坚持使用优质原料，为顾客带来美味与健康。</p>
        </div>
        <div>
          <h5 class="font-semibold mb-4">关于我们</h5>
          <ul class="space-y-2 text-sm text-gray-600">
            <li><a href="#" class="hover:text-heytea-green transition-colors">品牌故事</a></li>
            <li><a href="#" class="hover:text-heytea-green transition-colors">新闻动态</a></li>
            <li><a href="#" class="hover:text-heytea-green transition-colors">加入我们</a></li>
          </ul>
        </div>
        <div>
          <h5 class="font-semibold mb-4">帮助中心</h5>
          <ul class="space-y-2 text-sm text-gray-600">
            <li><a href="#" class="hover:text-heytea-green transition-colors">常见问题</a></li>
            <li><a href="#" class="hover:text-heytea-green transition-colors">联系客服</a></li>
            <li><a href="#" class="hover:text-heytea-green transition-colors">隐私政策</a></li>
          </ul>
        </div>
        <div>
          <h5 class="font-semibold mb-4">关注我们</h5>
          <div class="flex space-x-4 mb-4">
            <a href="#" class="w-10 h-10 rounded-full bg-heytea-green text-white flex items-center justify-center hover:bg-heytea-darkGreen transition-colors">
              <i class="fa fa-weixin"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-heytea-green text-white flex items-center justify-center hover:bg-heytea-darkGreen transition-colors">
              <i class="fa fa-weibo"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-heytea-green text-white flex items-center justify-center hover:bg-heytea-darkGreen transition-colors">
              <i class="fa fa-instagram"></i>
            </a>
          </div>
          <p class="text-sm text-gray-600">客服热线：400-820-6878</p>
        </div>
      </div>
      <div class="border-t border-gray-200 mt-8 pt-6 text-center text-sm text-gray-500">
        <p>© 2023 喜茶 HEYTEA. 保留所有权利</p>
      </div>
    </div>
  </footer>

  <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>
